<template>
  <el-container>
    <el-header height="150px">
      <h1>地税查询</h1>
      <el-row type="flex" justify="center" align="middle">
        <el-col :span="6" :offset="2">
          <el-input @keyup.enter.native="getList" @clear="getList" v-model="searchObj.housingType" placeholder="输入房产类型" style="width: 80%" clearable/>
        </el-col>
        <el-col :span="13" >
          <el-input @keyup.enter.native="getList" @clear="getList" v-model="searchObj.searchContent" placeholder="输入 小区名(街道编号) + 一个空格 + 楼层 可以更快匹配，例如：迎宾北大道1088 6" style="width: 80%" clearable/>
          <el-button type="primary" @click="getList">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" icon="el-icon-circle-plus-outline" @click="toAdd">添加</el-button>
        </el-col>
        <el-col :span="2">
          <el-upload
              :headers="uploadHeaders"
              :action="uploadUrl"
              :on-success="uploadSuccessHandler"
              multiple>
            <el-button type="info" icon="el-icon-upload">批量添加</el-button>
          </el-upload>
        </el-col>
        <el-col :span="2">
          <el-button type="warning" @click="toSetListHeader">
            表头设置
          </el-button>
          <el-dialog
              title="表头设置"
              :visible.sync="listHeaderSetDialogVisible"
              :append-to-body="true"
              width="30%">
            <el-container>
              <el-main>
                <el-checkbox-group v-model="listHeaderCheck" @change="listHeaderHandler">
                  <el-checkbox v-for="item in listHeader" :key="item.index" :label="item">{{ item.label }}</el-checkbox>
                </el-checkbox-group>
              </el-main>
              <el-footer>
                <el-button type="success" size="mini" @click="saveListHeader">确定</el-button>
                <el-button type="info" size="mini" @click="initListHeader">恢复默认</el-button>
              </el-footer>
            </el-container>
          </el-dialog>
        </el-col>
        <el-col :span="2">
          <el-button @click="downloadExcel" :loading="excelButtonLoading">导出Excel</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <!--    表格-->
      <el-table
          :data="list"
          v-loading="tableLoading">
        <el-table-column v-for="item in listHeaderCheck" :key="item.index" :prop="item.prop" :label="item.label" width="180"/>
        <el-table-column
            label="操作"
            fixed="right"
            width="180">
          <template slot-scope="scope">
            <el-button class="tag-read" size="mini" type="info" :data-clipboard-text="scope.row.buildingName" @click="copy">复制</el-button>
            <el-button size="mini" type="warning" icon="el-icon-edit" circle @click="toUpdate(scope.row)"></el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="deleteById(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-show="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[sizePage, sizePage * 2, sizePage * 4, sizePage * 6]"
          :page-size="sizePage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage">
      </el-pagination>
    </el-main>
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="50%">
      <el-form
          :model="landTaxObj"
          label-position="right"
          size="small"
          label-width="180px">
        <el-form-item label="县/区">
          <el-input v-model="landTaxObj.country"></el-input>
        </el-form-item>
        <el-form-item label="街道办事处">
          <el-input v-model="landTaxObj.addressOffice"></el-input>
        </el-form-item>
        <el-form-item label="社区名称">
          <el-input v-model="landTaxObj.community"></el-input>
        </el-form-item>
        <el-form-item label="小区">
          <el-input v-model="landTaxObj.village"></el-input>
        </el-form-item>
        <el-form-item label="楼栋名称和编号">
          <el-input v-model="landTaxObj.buildingName"></el-input>
        </el-form-item>
        <el-form-item label="地税前台产证匹配">
          <el-input v-model="landTaxObj.landTaxMatching"></el-input>
        </el-form-item>
        <el-form-item label="房产类型">
          <el-input v-model="landTaxObj.houseType"></el-input>
        </el-form-item>
        <el-form-item label="总楼层">
          <el-input v-model="landTaxObj.floor"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveOrUpdate" :loading="saveOrUpdateButtonLoading">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
// @ is an alias to /src
import { addResidential, deletedResidential, getResidentialHeader, exportExcelResidential,pageResidential, searchResidential, updateResidential, validObj} from "@/api/LandTax";

export default {
  name: 'Tax',

  data(){
    return{

      searchObj: {},

      list: [],
      listHeader: [],
      listHeaderCheck: [],
      currentPage: 1,
      totalPage: 0,
      sizePage: 10,
      tableLoading: false,
      isShow: false,
      dialogVisible: false,
      listHeaderSetDialogVisible: false,
      excelButtonLoading: false,
      saveOrUpdateButtonLoading: false,
      showPage: true,
      dialogTitle: '修改',
      landTaxObj: {},
      uploadUrl: process.env.VUE_APP_BASE_API + '/residential/upload',
      uploadHeaders: {
        "Authorization": sessionStorage.getItem('jwt')
      }
    }
  },

  created() {
    this.init();
  },

  methods: {

    init(){
      this.getList()
      this.initListHeader()
    },

    handleSizeChange(val){
      const searchObj = this.searchObj
      if (validObj(searchObj)){
        searchResidential(searchObj, this.currentPage, val).then(res => {
          this.list = res.data.data.list
          this.totalPage = res.data.data.total
        }).finally(() => {
          this.tableLoading = false
        })
      }else {
        pageResidential(this.currentPage,val).then(res => {
          this.list = res.data.data.list
          this.totalPage = res.data.data.total
        }).catch().finally( () => {
          this.tableLoading = false
        })
      }
    },

    handleCurrentChange(val){
      const searchObj = this.searchObj
      this.tableLoading = true
      if (validObj(searchObj)){
        searchResidential(searchObj, val, this.sizePage).then(res => {
          this.list = res.data.data.list
          this.totalPage = res.data.data.total
        }).finally(() => {
          this.tableLoading = false
        })
      }else {
        pageResidential(val,this.sizePage).then(res => {
          this.list = res.data.data.list
          this.totalPage = res.data.data.total
        }).catch().finally( () => {
          this.tableLoading = false
        })
      }

    },

    getList(){
      const searchObj = this.searchObj
      this.tableLoading = true
      if (validObj(searchObj)){
        searchResidential(searchObj, this.currentPage, this.sizePage).then(res => {
          this.list = res.data.data.list
          this.totalPage = res.data.data.total
        }).finally(() => {
          this.tableLoading = false
        })
      }else {
        pageResidential(this.currentPage,this.sizePage).then(res => {
          this.list = res.data.data.list
          this.totalPage = res.data.data.total
        }).catch().finally( () => {
          this.tableLoading = false
        })
      }

    },

    toUpdate(data){
      this.dialogTitle = '修改'
      this.dialogVisible = true
      this.landTaxObj = data
    },

    toAdd(){
      this.landTaxObj = {}
      this.dialogVisible = true;
      this.dialogTitle = '添加';
    },

    saveOrUpdate(){
      this.saveOrUpdateButtonLoading = true
      let landTaxObj = this.landTaxObj;
      if (landTaxObj.id){
        updateResidential(landTaxObj).then(res => {
          this.$notify.success(res.data.message)
        }).finally(() => {
          this.getList()
          this.dialogVisible = false;
          this.saveOrUpdateButtonLoading = false
        })
      }else {
        addResidential(landTaxObj).then(res => {
          this.$notify.success(res.data.message)
        }).finally(() => {
          this.getList()
          this.dialogVisible = false
          this.saveOrUpdateButtonLoading = false
        })
      }

    },

    deleteById(id){
      this.$confirm('确定删除吗？', '删除', {
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(() => {
        deletedResidential(id).then(res => {
          this.$notify.success(res.data.message)
        }).finally(() => {
          this.getList()
        })
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },

    uploadSuccessHandler(res, file, fileList){
      this.$notify.success(res.data.message)
      this.init()
    },

    copy(){
      let clipboard = new this.$clipboard('.tag-read')
      clipboard.on('success', e => {
        this.$message.success(e.text + ' --> 复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$message.error(e.text + ' --> 复制失败，请检查浏览器版本')
        clipboard.destroy()
      })
    },

    toSetListHeader(){
      this.listHeaderSetDialogVisible = true
    },

    saveListHeader(){
      this.listHeaderCheck = this.listHeaderCheck.sort(this.compare('index'))
      this.listHeaderSetDialogVisible = false
    },

    compare(key){
      return function(a,b){
        var val1 = a[key];
        var val2 = b[key];
        return val1 - val2;
      }
    },

    listHeaderHandler(val){
      // console.log(val)
    },

    initListHeader(){
      getResidentialHeader().then(res => {
        this.listHeaderCheck = res.data.data.list
        this.listHeader = res.data.data.list
      })
    },

    downloadExcel(){
      this.excelButtonLoading = true
      exportExcelResidential().then(res => {
        let data = res.data;
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', '南昌市住宅地税前台.xlsx');
        document.body.appendChild(link);
        link.click()
      }).catch(() => {
        this.$message.error('传输管道破裂')
      }).finally( () => {
        this.excelButtonLoading = false
      })
    }
  }
}
</script>
<style scoped>
</style>
